<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Lowin</title>
    <link rel="stylesheet" href="./css/auth.css" th:href="@{/css/auth.css}">
</head>
<body th:background="@{/images/background-img.jpeg}">
<div class="lowin lowin-blue">
    <div class="lowin-brand">
        <img src="./images/tb02.jpg" th:src="@{/images/logo-img.jpg}" alt="logo">
    </div>
    <div class="lowin-wrapper">
        <div class="lowin-box lowin-login">
            <div class="lowin-box-inner">
                <form>
                    <p>停车场管理系统</p>
                    <div class="lowin-group">
                        <label>用户名</label>
                        <input id="username" type="text" autocomplete="text" name="username" class="lowin-input">
                    </div>
                    <div class="lowin-group password-group">
                        <label>密码
                            <a th:href="@{/admin/toResetPassword}" class="forgot-link">忘记密码?</a>
                        </label>
                        <input id="password" type="password" name="password" autocomplete="current-password"
                               class="lowin-input">
                    </div>
                    <button id="loginBtn" type="button" class="lowin-btn login-btn">
                        登陆
                    </button>
                    <div class="text-foot">
                        没有账号? <a href="regist.html" th:href="@{/admin/toRegist}" class="register-link">注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/commonElement :: jsFile"></div>
<script th:inline="javascript" type="text/javascript">
    layui.use('layer', function () {
        var layer = layui.layer;
    });

    // 获取项目路径
    var projectPath = [[${#httpServletRequest.getContextPath()}]];

    // 获取登陆按钮
    var loginBtn = document.getElementById("loginBtn");
    // 给登陆按钮绑定单击响应函数
    loginBtn.onclick = function () {
        // 获取用户名
        var username = document.getElementById("username").value;
        // 获取密码
        var password = document.getElementById("password").value;
        // ajax
        var xhr = new XMLHttpRequest();
        var url = projectPath + "/admin/login?" + "username=" + username + "&password=" + password;
        xhr.open("get", url);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var responseText = xhr.responseText;
                if (responseText == "true") {
                    window.location.href = projectPath + "/car/main";
                } else {
                    layer.open({
                        title: '账号密码错误'
                        , content: '用户名不存在或密码错误，请重新输入！'
                    });
                }
            }
        }
    };
</script>
</body>
</html>
